<template>
  <div class="index">
    <div class="index-img">
      <img :src="index" alt="音乐" />
    </div>
    <div class="index-item">
      {{ list[0] && list[0].name }}
    </div>
    <div class="index-but" :ref="butRef">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-you"></use>
      </svg>
    </div>
    <audio
      :src="song.url"
      :autoplay="true"
      :controls="false"
      preload="auto"
    ></audio>
  </div>
</template>

<script lang="ts">
import { onMounted, reactive, ref, toRefs } from "vue";
import { playlist, songUrl } from "@/api/music/index";
export default {
  name: "audioPlay",
  setup() {
    interface Data {
      list: object[];
      index: string;
      song: { url: string };
      show: boolean;
      getUrl: Function;
      gethot: Function;
    }

    const data: Data = reactive({
      list: [],
      index: "",
      song: {
        url: ""
      },
      show: true,
      getUrl: async (id: number): Promise<void> => {
        const res: any = await songUrl({ id });
        if (res.code === 200) {
          data.song = res.data[0];
        }
      },
      gethot: async (): Promise<void> => {
        const res: any = await playlist({ id: 5311085218 });
        if (res.code === 200) {
          data.list = res.playlist.tracks;
          data.index = res.playlist.tracks[0].al.picUrl;
          data.getUrl(res.privileges[0].id);
        }
      }
    });

    // 侧边显示隐藏
    const butRef = ref("");
    const but = () => {
      data.show = !data.show
    };

    onMounted(() => {
      data.gethot();
      setTimeout(() => {
        if (data.show) but();
      }, 2000);
    });

    return {
      ...toRefs(data),
      but,
      butRef
    };
  }
};
</script>

<style lang="scss" scoped>
.index {
  position: fixed;
  bottom: 0;
  left: -14rem;
  z-index: 99;
  background-color: #fff;
  display: flex;
  scroll-behavior: smooth;
  transition: all 0.5s;
  &-img {
    img {
      width: 3rem;
      height: 3rem;
      animation: rotate 15s linear infinite;
      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(359deg);
        }
      }
      border-radius: 50%;
      margin: 0.5rem;
    }
  }
  &-item {
    width: 10rem;
    line-height: 2rem;
    font-size: 0.3rem;
  }
  &-but {
    width: 1.5rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-left: 1px solid rgba(153, 153, 153, 0.322);
    box-shadow: 2px 0px 6px 0.2px #767667c7;
  }
  &:hover {
    left: 0;
  }
}
</style>
